<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            width: 100%;
            height: 3000px;
        }
        .header{
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: center;
            /* 水平方向居中对齐 */
            align-items: center;
            font-size: 30px;
            color:#fff;
            background-color: orange;
            position: fixed;
            left: 0px;
            top: -80px;
            transition: top .5s linear;
        }

        .goTop{
            width: 66px;
            height: 66px;
            line-height: 33px;
            border: 1px solid red;
            font-size: 20px;
            color:#fff;
            background-color: pink;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
            text-align: center;
            cursor: pointer;
        }

    </style>
</head>
<body>
    
  <div class="header">顶部通栏</div>
  <div class="goTop">回到顶部</div>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
    <li>37</li>
    <li>38</li>
    <li>39</li>
    <li>40</li>
    <li>41</li>
    <li>42</li>
    <li>43</li>
    <li>44</li>
    <li>45</li>
    <li>46</li>
    <li>47</li>
    <li>48</li>
    <li>49</li>
    <li>50</li>
    <li>51</li>
    <li>52</li>
    <li>53</li>
    <li>54</li>
    <li>55</li>
    <li>56</li>
    <li>57</li>
    <li>58</li>
    <li>59</li>
    <li>60</li>
    <li>61</li>
    <li>62</li>
    <li>63</li>
    <li>64</li>
    <li>65</li>
    <li>66</li>
    <li>67</li>
    <li>68</li>
    <li>69</li>
    <li>70</li>
    <li>71</li>
    <li>72</li>
    <li>73</li>
    <li>74</li>
    <li>75</li>
    <li>76</li>
    <li>77</li>
    <li>78</li>
    <li>79</li>
    <li>80</li>
    <li>81</li>
    <li>82</li>
    <li>83</li>
    <li>84</li>
    <li>85</li>
    <li>86</li>
    <li>87</li>
    <li>88</li>
    <li>89</li>
    <li>90</li>
    <li>91</li>
    <li>92</li>
    <li>93</li>
    <li>94</li>
    <li>95</li>
    <li>96</li>
    <li>97</li>
    <li>98</li>
    <li>99</li>
    <li>100</li>
  </ul>

  <script>
    // 需求:

    // 滚动条滚动到指定的位置  顶部通栏(默认隐藏) 显示 回到顶部按钮(默认隐藏) 显示
    // 如果小于这个位置   顶部通栏隐藏    回到顶部按钮隐藏  


    // 如何获取 滚动条到达哪个位置? 
    //  页面卷取的高度
    //    scrollTop   兼容性

    // 如何让顶部通栏  回到顶部按钮显示隐藏
    //   修改样式 
    //   顶部通栏  top   0px 显示  -80px 隐藏 
    //   回到顶部按钮  display  block    none 


    // 需求2

    // 点击回到顶部按钮  页面回到顶部  
    // 如何实现?
    //  给按钮一个点击事件  
    //   scrollTo



    // 获取元素  

    var headEle = document.getElementsByClassName('header')[0];
    var goTopEle = document.getElementsByClassName('goTop')[0];

    // 获取卷取的高度 
    window.onscroll = function(){
        var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
        // 设置临界值  666
        if(scrolltop>=666){
            // 顶部通栏显示 
            headEle.style.top = '0px';

            // 回到顶部按钮显示
            goTopEle.style.display = 'block';
        }
        else{
             // 顶部通栏隐藏
             headEle.style.top = '-80px';
            // 回到顶部按钮隐藏
            goTopEle.style.display = 'none';
        }
    } 


    goTopEle.onclick = function() {
        window.scrollTo({top:0,behavior:'smooth'})
    }

  </script>
</body>
</html>